<!-- 1. 逻辑代码 写函数 定义数据
setup : 用 Vue 提供的一种 语法糖 ， 简化的写法
lang = 'ts', 内部写的语言： TypeScript
-->

<script setup lang="ts">
import { ref } from 'vue'

// 1. 支持复杂类型和简单类型 数据 的响应
const foods = ref(['西兰花', '猪脚', '黄焖鸡'])
const num = ref(100)
function changeFood() {
  // 在逻辑代码中修改数据， 需要.value
  foods.value.unshift('鸡腿饭')
}
</script>

<!-- 2. 结构 -->
<template>
  <!-- ref 定义的数据 在UI界面中使用或者修改不需要.value -->
  <div @click="num++">{{ num }}</div>
  <div @click="changeFood">{{ foods }}</div>
</template>
<!-- 3. 样式 -->
<style scoped></style>
